<template>
	<view>
		<!-- 轮播图 -->
		<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" indicator-color="#0000000d" indicator-active-color="#c00000">
			<swiper-item v-for="(item,i) in goodsInfo.pics" :key="i">
				<image :src="item.pics_big" @click="preview(i)"></image>
			</swiper-item>
		</swiper>
	     <!-- 商品信息详情 -->
		 <view class="detail">
			 <!-- 商品详情主题 -->
			 <view class="detail-item">
				 <!-- 商品价格 -->
				 <view class="detail_price">￥{{goodsInfo.goods_price}}</view>
				 <!-- 商品介绍 -->
				 <view class="detail_name">
					 <view class="left_name">{{goodsInfo.goods_name}}</view>
					 <view class="right_shoucang">
						 <view>收藏</view>
						 <uni-icons type="star" size="15"></uni-icons>
					 </view>
				 </view>
				 <!-- 免运费介绍 -->
				 <view class="yun">￥0-免运费</view>
			 </view>
		 </view>
		 <rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
		 <!-- 商品导航栏区域 -->
		 <view class="options">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
							@buttonClick="buttonClick" />
		 </view>
	</view>
</template>

<script>
	import { mapState,mapMutations,mapGetters } from 'vuex'
	export default {
		data() {
			return {
				// 商品详情数据
				goodsInfo:[],
				 options: [{
							icon: 'shop',
							text: '店铺',
							infoBackgroundColor:'#ff0000',
							infoColor:"#fff"
						}, {
							icon: 'cart',
							text: '购物车',
							info: 0
						}],
					    buttonGroup: [{
					      text: '加入购物车',
					      backgroundColor: '#ff0000',
					      color: '#fff'
					    },
					    {
					      text: '立即购买',
					      backgroundColor: '#ffa200',
					      color: '#fff'
					    }
					    ]
			};
		},
		onLoad(options) {
			// console.log(options)
			const goods_id = options.goods_id
			this.getGoodsInfo(goods_id)
		},
		methods:{
			...mapMutations('m_cart',['addCart']),
			async getGoodsInfo(goods_id) {
				const{data:res} =await uni.$http.get('public/v1/goods/detail',{goods_id})
				// console.log(res)
				if(res.meta.status !== 200) return uni.$showMsg()
				res.message.goods_introduce = res.message.goods_introduce.replace(/webp/g,'jpg')
				this.goodsInfo = res.message
			},
			preview(i){
				uni.previewImage({
					// 当前图片的索引值
					current:i,
					// 当前图片urls地址
					urls:this.goodsInfo.pics.map(x => x.pics_big)
				})
			},
			onClick(e) {
				// console.log(e)
				if(e.content.text === '购物车')
				uni.switchTab({
					url:'/pages/cart/cart'
				})
			},
			buttonClick(e) {
				if(e.content.text === '加入购物车'){
					const goods = {
						goods_id: this.goodsInfo.goods_id,
						goods_count: 1,
						goods_name:this.goodsInfo.goods_name,
						goods_price: this.goodsInfo.goods_price,
						goods_state: true,
						goods_small_logo: this.goodsInfo.goods_small_logo
					}
					this.addCart(goods)
				}
			}
		},
		computed:{
			...mapState('m_cart',['cart']),
			...mapGetters('m_cart',['total'])
		},
		watch: {
			total:{
			  handler(newValue){
				  	const findResult = this.options.find(x => x.text === '购物车')
				  	findResult.info = newValue
			  },	
			   immediate:true
			}
		}
	}
</script>

<style lang="scss">
 // 上部轮播图样式
 swiper{
	 height: 750rpx;
	 swiper-item{
		 image{
			 width: 100%;
			 height:100%
		 }
	 }
 }
 // 商品介绍样式
 .detail{
	 display: flex;
	 .detail-item{
		 margin: 5px;
		 display: flex;
		 flex-direction: column;
		 .detail_price{
			 font-size: 19px;
			 color:#c00000;
		 }
		 .detail_name{
			 display: flex;
			 flex-direction: row;
			 justify-content: space-between;
			 .left_name{
				 width: 88%;
				 border-right: 1px solid #efefef;
			 }
			 .right_shoucang{
				 display: flex;
				 flex-direction: column;
				 align-items: center;
			 }
		 }
	 }
	 .yun{
		 font-size: 14px;
		 color: darkgrey;
	 }
 }
 .options{
	 position: sticky;
	 bottom: 0;
 }
</style>
